<template>
  <div class="test-container">
   
    <div class="list">
      <div class="rowup" ref="scroll">
        <div
          class="ccc hand"
          @mouseover="toggleShow(true)"
          @mouseout="toggleShow(false)"
          v-for="(item,index) in 20"
          :key="index"
          @click="click(index)"
        >{{index}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
  
    toggleShow(type) {
      console.log(type);
      if (type) {
        console.log("鼠标进入");
        this.$refs.scroll.style.animationPlayState = "paused";
      } else {
        console.log("鼠标离开");
        setTimeout(() => {
          this.$refs.scroll.style.animationPlayState = "running";
        }, 1000);
      }
    },
    click(index) {
      console.log(index);
      alert(index);
    }
  }
};
</script>
<style lang="scss" scoped>
@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}

.list {
  width: 500px;
  border: 1px solid #999;
  margin: 20px auto;
  position: relative;
  height: 200px;
  overflow: hidden;
}
.ccc {
  line-height: 20px;
  background: green;
  width: 100%;
  margin: 4px 0;
}

.list .rowup {
  -webkit-animation: 30s rowup linear infinite normal;
  animation: 30s rowup linear infinite normal;
  animation-iteration-count: 20; //动画执行次数
  -webkit-animation-iteration-count: 20; /*Safari and Chrome*/
  animation-delay: 2s; // 动画等待2s开始执行
  -webkit-animation-delay: 2s; /* Safari 和 Chrome */
  position: relative;
}
</style>
